<template>
    <div class="captcha_box">
        <div>
            <van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="back" />
        </div>

        <van-cell class="text" :border="false" center title="更换手机号" label="请输入新手机号，作为登录帐号" />

        <div class="inputBox">

        <van-form>
            <div class="tel">
              <button @click="changeTel">手机号&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{code}}</span>
                  <van-icon name="arrow-down" />
              </button>
              <input type="tel" maxlength="11" placeholder="请输入手机号码" v-model="form.phoneNum" @input="onPhoneChange">
            </div>
            
            <div class="captcha">
              <van-field
              v-model="form.sms"
              center
              clearable
              label="验证码"
              placeholder="请输入验证码">
              <template #button>
                  <van-button round plain color="#ff6357" size="small" type="primary" @click.prevent="sendSmsCode" :disabled="isSmsSend">{{ sendBtnText }}</van-button>
              </template>
              </van-field>
            </div>
          </van-form>

        </div>

        <div class="btn">
            <van-button round @click="sub" color="#ff7b57"  size="large">确定</van-button>
        </div>
        <div class="tishi" v-show="tishishow">
            已向手机 {{this.code + this.form.phoneNum}} 发送验证码
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
//调用vuex修改手机号码
import { mapMutations } from "vuex";
export default {
    name: "ChangePhone",

    data(){
        return{
            form: {
                phoneNum: '',
                sms: ''
            },     
            code:"",  // 区号

            tishishow:false,
           // 是否已经发送了验证码
          isSmsSend: false,
          sendBtnText: '点击发送验证码',
          timer: null,
          counter: 60

        }
    },
    created() {
        // 拿到区号
        this.code = this.$store.state.login.areaCode
    },
    methods:{
        back() {
            this.$router.go(-1)
        },

        //获取vuex方法修改新手机账号
        ...mapMutations(['setUserNumber']),
        sub(){
          //判断验证码非空
            if(this.form.sms){
              console.log( this.form.phoneNum,this.form.sms);
              //修改新手机账号
              this.setUserNumber( this.form.phoneNum)  

              let that=this
              Toast({
                message:'设置成功',
                duration:1000,
                onClose() {
                    that.$router.push({ path:'/accounts'})  //这样用this将会指向toast  ，所以用that替代this将指向sub
                }
              })
            }else{
              Toast('请输入手机号及验证码');
            }
        },
        // 跳转到区号选择页面
        changeTel() {
            this.$router.push('/SelectTel')
        },
                /**
         * 重置倒计时
         */
         reset () {
          this.tishishow=false
          this.isSmsSend = false
          this.sendBtnText = '点击发送验证码'
          if (this.timer) {
            clearInterval(this.timer)
            this.counter = 60
            this.timer = null
          }
        },
        /**
         * 倒计时
         */
        countDown () {
          this.timer = setInterval(() => {
            this.sendBtnText = `重新获取${this.counter}秒`
            this.counter--
            if (this.counter < 0) {
              this.reset()
            }
          }, 1000)
        },
        /**
         * 发送验证码
         */
        sendSmsCode () {
          let pattern = /0?(13|14|15|18|17)[0-9]{9}/  //验证手机号码正则表达式
          // let pattern=/^1[3456789]\d{9}$/
          // 判断手机号是否已经输入
          if (!this.form.phoneNum) {
            Toast('请输入手机号')
            return false
          }
          // 判断手机号是否符合正则要求
          if (!pattern.test(this.form.phoneNum)) {    //如果不符合手机号码正则
            Toast('请输入正确的手机号')
            return false
          }
          // 调用接口，发送短信验证码
          this.isSmsSend = true
          
        //   提示展示出来
        this.tishishow=true
          // 开始倒计时，60s之后才能再次点击
          this.countDown()
        },
        // 当手机号变化时，重置发送按钮
        onPhoneChange () {
          this.tishishow=false
          this.reset()
        }
    }
        
}

</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    width: 92%;
    margin: 80px auto 20px;
    }
    .inputBox{
        margin-top: 50px;
    }
    .tishi{
        width: 92%;
        margin: auto;
        text-align: center;
        font-size: 14px;
        color:#5e5e5e;
    }


    /* //手机号码输入框及区号选择部分 */
    .tel {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #cfccd6;
    width: 100%;
    padding: 10px 16px;
}

.tel button {
    width: 30%;
    text-align: inherit;
    font-size: 15px;
    border: none;
    padding: 6px 0;
    background-color: #ffffff;
}

.tel input {
    font-size: 15px;
    width: 60%;
    border: none;
}
.captcha {
    border-bottom: 1px solid #cfccd6;
    width: 100%;


}


</style>
